<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>附近人脉</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <style type="text/css">
            .aui-img-object{
                width: 45px !important;
                height: 45px !important;
            }
            .aui-list-view p{
                padding-top:5px;
                font-size:12px;
            }
            .addfriend_btn{
                font-size: 11px;
                background: #327afa;
                color: #fff;
                padding: 0px 5px;
                line-height: 21px;
            }
            .added{
                background: #2ecc71 !important;
            }
        </style>
    </head>
    <body>
         <div class="aui-content">
            <ul class="aui-list-view" id="list-user" style="display: none !important;">
            </ul>
        </div>
    </body>
    <script id="list-template" type="text/x-dot-template">
        {{ for(var i in it){ }}
        {{?it[i].userid!=0}}
        <li class="aui-list-view-cell aui-img">
        <img class="aui-img-object aui-pull-left" src="{{=it[i].thumb}}" onclick="go2User({{=it[i].userid}},'../');">
            <div class="aui-img-body">
                <div class="aui-pull-left">
                    <span onclick="go2User({{=it[i].userid}},'../');">{{=it[i].company}}</span>
                    <p>
                        {{? it[i].distance<200 }}
                        200米以内
                        {{?? it[i].distance<500 }}
                        500米以内
                        {{?? it[i].distance<1000 }}
                         < 1km
                        {{?? it[i].distance<1500 }}
                         < 1.5km
                        {{?? it[i].distance<2000 }}
                         < 2km
                        {{?? it[i].distance<5000 }}
                         < 5km
                        {{?? it[i].distance<10000 }}
                         < 10km
                        {{?? it[i].distance>10000 }}
                         > 10km
                        {{?}}
                    </p>
                </div>
                {{? it[i].userid!=myUid}}
                {{? it[i].relation>=1}}
                <div class="addfriend_btn aui-pull-right added">已加人脉</div>
                {{??}}
                <div class="addfriend_btn aui-pull-right" onclick="addFriend(this)" data-userid="{{=it[i].userid}}">加为人脉</div>
                {{?}}
                {{?}}
            </div>
        </li>
        {{?}}
        {{ } }}
    </script>
    <script type="text/javascript" src="../../script/api.js" ></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        var isLock=false,myUid;
        var page=1;
        var longitude,latitude;
        apiready = function() {
            api.parseTapmode();
            api.setRefreshHeaderInfo({
                visible : true,
                loadingImg : 'widget://image/ptr_pull.png',
                bgColor : '#efeff4',
                textColor : '#959595',
                textDown : '下拉刷新',
                textUp : '松开刷新',
                showTime : true
            }, function(ret, err) {
                page = 1;
                isLock=false;
                loadData();
            });

            // 监听是否达到底部上拉加载
            api.addEventListener({
                name : 'scrolltobottom'
            }, function(ret, err) {
                page++;
                if (!isLock)loadData(page);
            });

            longitude=api.pageParam.longitude;
            latitude=api.pageParam.latitude;

            api.refreshHeaderLoading();
        }

        function loadData(toPage){
            toPage=toPage?toPage:page;

            if(toPage==1)api.refreshHeaderLoading();

            getStorageAll();

            var data = {};
            var url='Member/nearby?username='+user_name+'&page='+toPage+(latitude&&longitude?('&latitude='+latitude+'&longitude='+longitude):'');
            myUid=user_id;

            if(!isLock){
                isLock = true;
                ajaxRequest(url, 'get', data, function (ret, err) {
                    api.refreshHeaderLoadDone();            

                    if (ret.status == 1) {
                        var tpl = $api.byId('list-template').text;
                        var tempFn = doT.template(tpl);

                        if (toPage > 1) {
                            if(!$.trim(ret.msg)){
                                return;
                            }
                            $('#list-user').show().append(tempFn(ret.msg));
                        }else{
                            $('#list-user').show().html(tempFn(ret.msg));
                        }
                    } else {
                        api.toast({
                            msg: ret.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                    isLock=false;

                });
            }
        }

        //单击加为人脉
        function addFriend(obj) {
           getStorageAll();
           var $obj=$(obj);
           var fuserid=$obj.attr('data-userid');
           ajaxRequest('Friendship/follow?username='+user_name, 'post', {fuserid:fuserid}, function (ret, err) {
            if (ret.status == 1&&(typeof ret.msg !== 'string')) {
                $obj.removeAttr('tapmode');
                $obj.attr('onclick',null);
                $obj.text("已加人脉");
                $obj.addClass("added");
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
            })
       }
    </script>
</html>